<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>粒子</title>
</head>
<style>
    /* div {
        text-align: center;
        margin-top: 150px;
    } */
</style>

<body>
    <div>
        <canvas id="canvas"></canvas>
    </div>
    <script>
        var ww=window.innerWidth,
        wh=window.innerHeight;
        let canvas = document.getElementById('canvas');//获取画布
        let ctx = dom.getContext('2d'); //获取canvas上下文 
        canvas.width=300;
        canvas.height=300;
        var Particle=function(){

        }
        Particle.prototype={
            init:function(){
                var img=new Image();
                img.onload=function(){
                    ctx.drawImage(img,0,0,300,300)
                    var imageData=ctx.getImageData(0,0,300,300).data
                    var index=0;
                    var colors=[];
                    const w=canvas.width,
                    h=canvas.height;
                    for(let y=0;y<h;y++){
                        colors.push({

                        })
                    }
                    ctx.clearRect(0,0,300,300)
                    for(var i=0;i<colors.length;i++){
                        ctx.fillStyle=colors[i].color
                    }
                   
                }
            }
        }
    </script>
</body>

</html>